<template>
  <view class="container">
    <div style="height: 5vh"></div>
    <div
      style="display: flex; align-items: center; width: 90%; margin-left: 5%"
    >
     <!-- <image
        style="width: 80rpx; height: 80rpx"
        src="../../static/.jpg"
        mode="widthFix"
      /> -->
      <div style="width: 10px"></div>
      <div class="title">汇君环能数字中心</div>
    </div>
    <div style="height: 10px"></div>
    <div class="top-message">
      <div>滚动字幕或报警信息或其他信息展示区</div>
    </div>
    <div style="height: 10px"></div>
    <map style="width: 100%; height: 35vh" name="" @click="targetScreen"></map>
    <div style="height: 10px"></div>
    <div class="topBorder">
      <div style="height: 20px"></div>
      <div v-for="(item, index) in topInfo" class="vFor">
        <div
          @click="toggleIndex(index)"
          :class="index == topIndex ? 'activeClass' : ''"
          class="heads"
        >
          {{ item }}
        </div>
      </div>
      <!-- <div style="height: 20px;"></div> -->
    </div>
    <div style="height: 10px"></div>
    <div v-if="topIndex == 0 || topIndex == 1">
      <div v-for="item in list" class="card" @click="clickCard()">
        <div style="height: 10px"></div>
        <div style="width: 90%; margin-left: 5%">
          <div class="topTitle">{{ item.driver }}</div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>累计处理量</div>
            <div>11231t</div>
          </div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>本年处理量</div>
            <div>11231t</div>
          </div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>本月处理量</div>
            <div>11231t</div>
          </div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>本日处理量</div>
            <div>11231t</div>
          </div>
        </div>
        <div style="height: 10px"></div>
      </div>
    </div>
    <div
      v-if="topIndex == 2"
      style="display: flex; flex-wrap: wrap; justify-content: center"
    >
      <div
        v-for="item in lists"
        style="
          width: 49%;
          display: flex;
          justify-content: center;
          margin-top: 10px;
        "
      >
        <div>
          <div style="display: flex; justify-content: center">
            <div class="round">{{ item.value }}</div>
          </div>
          <div style="text-align: center; color: #fff">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div style="height: 30px"></div>
    
    <!-- 遮罩层 -->
    <u-overlay :show="showModal" @click="showModal = false">
		<view class="warp">
			<view class="rect" @tap.stop>
        <div style="height: 2vh;"></div>
        <div style="width: 90%;display: flex;justify-content: space-between;margin-left: 5%;">
              <div style="display: flex;">
                <div v-for="(item,index) in week" style="margin: 0 10rpx 0 0;" @click="toggleIndexs(item,index)">
                  <div class="roundDate" :class="index == indexs?'active':''">{{ item }}</div>
                </div>
              </div>
              <div style="color: #fff;" @click="showModal = false;">关闭</div>
        </div>
        <div style="height: 20px;"></div>
        <view class="charts-box">
    <qiun-data-charts 
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
  <div style="height: 1vh;"></div>
      </view>
		</view>
	</u-overlay>
  </view>
</template>
<script>
import qiunDataCharts from '@/pagesScreen/subpackageuni/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
  components: { qiunDataCharts },
  data() {
    return {
      indexs:0,
      week:['日','月','年'],
      showModal:false,
      topIndex: 1,
      startTime: "2023.09.09",
      endTime: "2023.09.09",
      list: [
        {
          id: "SM202307011002",
          time: "2024.04.12",
          driver: "张翠花",
          tel: "13709831413",
          type: "1", //自派单
          text: "污水",
          car: "浙A666666",
          status: "1",
          array: [
            {
              label: "XX收运点",
              status: "1",
              time: "12:50",
            },
            {
              label: "XX收运点",
              status: "2",
              time: "",
            },
          ],
        },
        {
          id: "SM202307011002",
          time: "2024.04.12",
          type: "2", //手工
          text: "污水",
          car: "浙A666666",
          driver: "张翠花",
          tel: "13709831413",
          status: "2",
        },
        {
          id: "SM202307011002",
          time: "2024.04.12",
          type: "2", //手工
          text: "污水",
          car: "浙A666666",
          driver: "张翠花",
          tel: "13709831413",
          status: "2",
        },
        {
          id: "SM202307011002",
          time: "2024.04.12",
          type: "2", //手工
          text: "污水",
          car: "浙A666666",
          driver: "张翠花",
          tel: "13709831413",
          status: "2",
        },
      ],
      indent: "",
      topInfo: ["粪污统计", "能源减排", "项目一览"],
      lists: [
        { name: "鸡粪污处理项目", value: "100" },
        { name: "鸡粪污处理项目", value: "100" },
        { name: "鸡粪污处理项目", value: "100" },
        { name: "鸡粪污处理项目", value: "100" },
        { name: "鸡粪污处理项目", value: "100" },
        { name: "鸡粪污处理项目", value: "100" },
      ],
      chartData: {},
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          axisLineColor:'#ffffff'
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 150
            }
          ]
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom"
          }
        }
      }
    };
  },
  methods: {
    clickCard(){
      this.getServerData();
      this.showModal = true;
    },
    taskDetail() {
      uni.navigateTo({ url: "/pagesPlant/index/procedetail" });
    },
    targetScreen(){
      uni.navigateTo({ url: '/pagesScreen/index/pagesPlantScreen' })
    },
    addQuest() {
      uni.navigateTo({ url: "/pagesPlant/index/addmain" });
    },
    toggleIndex(i) {
      this.topIndex = i;
    },
    toggleIndexs(i,index){
        this.indexs = index;
        // this.chartsWeek(i);
      },
      getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "成交量A",
                linearColor: [
                  [
                    0,
                    "#1890FF"
                  ],
                  [
                    0.25,
                    "#00B5FF"
                  ],
                  [
                    0.5,
                    "#00D1ED"
                  ],
                  [
                    0.75,
                    "#00E6BB"
                  ],
                  [
                    1,
                    "#90F489"
                  ]
                ],
                data: [15,45,15,45,15,45]
              },
              {
                name: "成交量B",
                linearColor: [
                  [
                    0,
                    "#91CB74"
                  ],
                  [
                    0.25,
                    "#2BDCA8"
                  ],
                  [
                    0.5,
                    "#2AE3A0"
                  ],
                  [
                    0.75,
                    "#C4D06E"
                  ],
                  [
                    1,
                    "#F2D375"
                  ]
                ],
                data: [55,85,55,85,55,85]
              },
              {
                name: "成交量C",
                linearColor: [
                  [
                    0,
                    "#FAC858"
                  ],
                  [
                    0.33,
                    "#FFC371"
                  ],
                  [
                    0.66,
                    "#FFC2B2"
                  ],
                  [
                    1,
                    "#FA7D8D"
                  ]
                ],
                data: [95,125,95,125,95,125]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
  onLoad() {},
  // onReady() {
  //   this.getServerData();
  // },
};
</script>
<style lang="scss">
.round {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  // background: #468b63;
  background: linear-gradient(to bottom, #5ab8ad, #4aae77,#39a340);
  // box-shadow: 0.1px 0.1px 2px #1073ab, 0.2px 0.2px 5px #1073ab,
  //   0.4px 0.4px 10.1px #1073ab, 0.8px 0.8px 20.8px #1073ab, 2px 2px 57px #1073ab;
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTitle {
  font-size: 18px;
  font-weight: 500;
}
.vFor {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: #d9d9d9;
}
.container {
  height: 100vh;
  width: 100vw;
  background-color: #1c400c;
  overflow-y: scroll;
}
.activeClass {
  color: #094100;
  background: #d9d9d9;
  padding: 15rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-left: 25rpx;
  padding-right: 25rpx;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
}
.heads {
  text-align: center;
}
.title {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.topBorder {
  border: 2px solid #cdcdcd;
  border-radius: 10px;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-message {
  width: 100vw;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #417039;
  font-size: 20px;
  font-weight: 500;
  color: #b7bfb6;
}
.card {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #406a31;
  border: 2px solid #cdcdcd;
  color: #fff;
}
.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}
.table {
  width: 90%;
  margin-left: 5%;
}
.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}
.status1 {
  color: #1a512c;
  background: #91c5a3;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}
.right {
  background: #fdbd18;
  color: #fff;
}
.right1 {
  background: #50ab18;
  color: #fff;
}
.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #1a512c;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}
.btn {
  display: flex;
  align-items: center;
  background: #1b9c46;
  color: #fff;
  border-radius: 7px;
  height: 60rpx;
  justify-content: center;
  position: absolute;
  width: 100px;
  z-index: 9999;
  bottom: 10%;
  right: 10px;
}
.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90vw;
		// height: 120px;
		background-color: #255620;
    border-radius: 20px;
    border: 2px solid #a0a2a0;
	}
  .km{
    color: #1a512c;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
  }
  .refresh{
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    color: #fff;
    background: #1A512C;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tip{
    font-size: 14px;
    color: #999999;
    text-align: center;
    font-weight: 500;
  }
  .roundDate{
    border-radius: 50%;
    border: 1px solid #999999;
    height: 50rpx;
    width: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #154123;
  }
  .active{
    background: #8e8e8e;
    color: #1e472b;
  }
  .charts-box {
    width: 100%;
    height: 200px;
    color: #fff;
  }
</style>
